<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="nav">
          <div class="title">产品类型列表</div>
          <div class="tree">
            <TreeProduct @sendTreeData="sendTreeData"></TreeProduct>
          </div></div
      ></el-col>
      <el-col :span="20"
        ><div class="wrapper">
          <div class="my-title">商品{{ title }}</div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="所属分类" prop="category">
              <span>{{ ruleForm.category }}</span>
            </el-form-item>
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="ruleForm.title" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="ruleForm.price" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="num">
              <el-input v-model="ruleForm.num" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品卖点" prop="sellPoint">
              <el-input v-model="ruleForm.sellPoint" size="small"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="image">
              <UploadImg @sendImg="sendImg" ref="uploadImg" :fileList="fileList"></UploadImg>
            </el-form-item>
            <el-form-item label="商品描述" prop="descs">
              <wangEditor @sendWangEditor="sendWangEditor" ref="wangEditor"></wangEditor>
            </el-form-item>
            <el-form-item label="首页轮播推荐" prop="delivery">
              <el-switch
                v-model="ruleForm.delivery"
                active-color="#13ce66"
                inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="是否推荐商品" prop="delivery">
              <el-switch
                v-model="ruleForm.delivery"
                active-color="#13ce66"
                inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="是否上架商品" prop="delivery">
              <el-switch
                v-model="ruleForm.delivery"
                active-color="#13ce66"
                inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" v-show="title != '详情'"
                >保存</el-button
              >
              <el-button @click="resetForm('ruleForm')" v-show="title != '详情'">重置</el-button>
              <el-button @click="closePage()">取消</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TreeProduct from "./TreeProduct.vue";
import UploadImg from "./UploadImg.vue";
import wangEditor from "./wangEditor.vue";
export default {
  components: {
    TreeProduct,
    UploadImg,
    wangEditor,
  },
  data() {
    return {
      fileList: [],
      ruleForm: {
        title: "",
        num: "",
        price: "",
        sellPoint: "",
        image: [],
        descs: "",
        category: "",
        cid: "",
        delivery: false,
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        sellPoint: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
        num: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState("product", ["rowData", "title"]),
  },
  methods: {
    closePage() {
      this.$router.push("/product/list");
    },
    sendImg(val) {
      this.ruleForm.image.push(val);
    },
    sendWangEditor(val) {
      this.ruleForm.descs = val;
    },
    sendTreeData(val) {
      this.ruleForm.category = val.name;
      this.ruleForm.cid = val.cid;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { id, title, image, sellPoint, price, cid, category, num, descs } = this.ruleForm;
          if (this.title == "添加") {
            this.$api
              .insertTbItem({
                title,
                image: JSON.stringify(image),
                sellPoint,
                price,
                cid,
                category,
                num,
                descs,
              })
              .then(() => {
                this.$message({
                  message: "添加商品成功",
                  type: "success",
                });
                this.$router.push("/product/list");
              });
          } else {
            this.updateTbItem({
              id,
              title,
              image: JSON.stringify(image),
              sellPoint,
              price,
              cid,
              category,
              num,
              descs,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateTbItem(params) {
      let res = await this.$api.updateTbItem(params);
      console.log(res);
      if (res.data.status == 200) {
        this.$message({
          message: "修改商品成功",
          type: "success",
        });
        this.$router.push("/product/list");
      }
    },
    resetForm(formName) {
      if (this.title == "添加") {
        this.$refs[formName].resetFields();
        this.$refs.uploadImg.clear();
        this.$refs.wangEditor.html = "";
      } else {
        this.ruleForm = JSON.parse(JSON.stringify(this.rowData));
        let imgs = this.rowData.image;
        let arr = JSON.parse(imgs);
        this.fileList = [];
        this.ruleForm.image = arr;
        arr.forEach((ele) => {
          this.fileList.push({ name: "", url: ele });
        });
        this.$nextTick(() => {
          this.$refs.wangEditor.html = this.rowData.descs;
        });
      }
    },
  },
  created() {
    if (this.title == "编辑" || this.title == "详情") {
      this.ruleForm = JSON.parse(JSON.stringify(this.rowData));
      let imgs = this.rowData.image;
      let arr = JSON.parse(imgs);
      this.ruleForm.image = arr;
      arr.forEach((ele) => {
        this.fileList.push({ name: "", url: ele });
      });
      this.$nextTick(() => {
        this.$refs.wangEditor.html = this.rowData.descs;
      });
    }
  },
};
</script>

<style lang="less" scoped>
.nav {
  height: 700px;
  background-color: #fff;

  .title {
    background-color: skyblue;
    padding: 16px;
    color: #fff;
  }

  .tree {
    padding: 16px;
  }
}
.wrapper {
  // height: 700px;
  background-color: #fff;

  .my-title {
    background-color: #ccc;
    padding: 10px;
    color: #333;
    font-weight: bold;
  }

  .demo-ruleForm {
    padding: 16px;
  }
}
</style>
